<template>
  <el-dialog
    :visible="showRoleDialog"
    title="分配角色"
    @close="handleClose"
    @open="handleOpen"
  >
    <el-checkbox-group
      v-model="checkList"
      v-loading="loading"
    >
      <el-checkbox
        v-for="(item, id) in roleList"
        :key="id"
        :label="item.id"
      >{{ item.name }}</el-checkbox>
    </el-checkbox-group>

    <template #footer>
      <el-button size="small" @click="handleClose">取消</el-button>
      <el-button type="primary" size="small" @click="handleSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { reqGetRoleList } from '@/api/setting'
import { reqGetUserDetailById } from '@/api/user'
import { reqAssignRole } from '@/api/employees'
export default {
  props: {
    showRoleDialog: {
      type: Boolean,
      default: false
    },
    userId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      checkList: [],
      roleList: [],
      loading: false
    }
  },
  methods: {
    // 1. 关闭对话框
    handleClose() {
      this.$emit('update:showRoleDialog', false)
      // 清空选中列表
      // 解决多次点击角色, 会从上一个角色的选中状态过渡到下一个角色的选中状态
      this.checkList = []
      this.roleList = []
    },
    // 2. 打开对话框
    handleOpen() {
      this.loading = true
      // 某些操作需要等到多个请求结果都回来后才能进行
      // 处理并发请求: Promise.all([])  Promise.race([])
      Promise.all([this.getRoleList(), this.getUserRoleList()]).then(() => {
        this.loading = false
      })

      // 注意: 不能写在这里, 上边的是异步操作 (先同步后异步)
      // this.loading = false
    },
    // 3. 获取角色列表
    async getRoleList() {
      const { data: { rows }} = await reqGetRoleList(1, 999999)
      this.roleList = rows
    },
    // 4. 获取员工拥有的角色
    async getUserRoleList() {
      const { data: { roleIds }} = await reqGetUserDetailById(this.userId)
      this.checkList = roleIds
    },
    // 5. 点击确认按钮
    async handleSubmit() {
      // 5.1 如果没有用户id
      if (!this.userId) {
        this.$message.error('没有获取到用户信息')
        return
      }
      // 5.2 发起请求
      await reqAssignRole(this.userId, this.checkList)
      this.$message.success('角色分配成功')
      // 5.3 关闭对话框
      this.handleClose()
    }
  }
}
</script>

<style>

</style>
